<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
	<%@ taglib prefix="fmt" 
           uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>XToolsCRM- easy to Power</title>
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/bs/css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/core.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/components.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/icons.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/pages.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/responsive.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/css.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/clockpicker/bootstrap-clockpicker.min.css" rel="stylesheet">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/select2/css/select2.min.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/sweetalert/sweetalert.min.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/custombox/custombox.min.css" rel="stylesheet">

		<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
		<script type="text/javascript">
			$(function() {
				var count =1;
				var baifen=100;
				
				$("#button").click(function() {
						var newtexttr = giveabovetr();
						$("#hkstart").append(newtexttr);
						count++;
				});
				
			

				/**
				 * 获一行新表格
				 */
				function giveabovetr() {
					

					var newtexttr = createtr("newtrid");
					var newtextqitd = createtd("qici", "第"+count+"期");
					
					//金額设置
					var newtextnametd = createtd("money", "");
					var moneytd=createinputext("moneytext", 4);
					newtextnametd.append(moneytd);
					
					//百分比设置
					var newtextpasstd = createtd("baifen", "");
					var baifense=createselect("baifense");
					for(var c=10; c<=baifen;c+=10){     
						var baifenseing=createselectoption("baifenseing", c);
						baifense.append(baifenseing);
			        }
					newtextpasstd.append(baifense);
					
					//日期
					var newtextactiontd = createtd("actionid", "");
					var newdate=createdate("datetimes");
					newtextactiontd.append(newdate);
					//givebutton(newtextactiontd);
					
					var newtextdotd = createtd("doid", "");
					givebutton(newtextdotd);
					
					newtexttr.append(newtextqitd);
					newtexttr.append(newtextnametd);
					newtexttr.append(newtextpasstd);
					newtexttr.append(newtextactiontd);
					 
					$(baifense).change(function() {
						var valuse = $(this).val();
						alert(valuse);
						baifen=baifen-valuse;
					});
					
					return newtexttr;
				}
				
				
				/**
				 * 添加操作按钮
				 */
				function givebutton(tdnode) {
					var modifybtn = createbutton("modifys", "修改");
					var deletebtn = createbutton("deletes", "删除");
					tdnode.append(modifybtn);
					tdnode.append(deletebtn);
					
					//不加$也可以用
					//$(deletebtn).click(function()
					deletebtn.click(function() {
						if("您是否确定删除此行？") {
							//$(this).parents().remove();
							$(this).parent().parent().remove();
						}
					});
					
					$(modifybtn).click(function() {
						var valuse = $(this).val();
						//alert(valuse);
						if(valuse == "修改") {
							$(this).val("确定");
							var names = $(this).parents("tr").find("#nameid");
							var namestext = names.text();
							//alert( names.text());
							var newinput = createinputext("uptext", namestext);
							names.first().html(newinput);
						} else {
							$(this).val("修改");
							var names = $(this).parents("tr").find("#nameid");
							var text = names.first().find("#uptext");
							var node = text.val();
							$(this).parents("tr").find("#nameid").html(node);
							//alert(node);
						}
					});

				}
				
				/**
				 * 创建表格行
				 * @param {Object} ids
				 * @param {Object} value
				 */
				function createtr(ids, value) {
					return $("<tr id='" + ids + "'></tr>");
				}

				/***
				 * 创建表格列
				 * @param {Object} ids
				 * @param {Object} value
				 */
				function createtd(ids, value) {
					return $("<td name='"+ids+"' id='" + ids + "' value='" + value + "' height='60' width='190' align='center'>" + value + "</td>");
				}
				
				/**
				 * 创建输入栏
				 * @param {Object} ids
				 * @param {Object} value
				 */
				function createinputext(ids, value) {
					return $("<input type='text' name='"+ids+"' id='" + ids + "' value='" + value + "' class='form-control' style='width:150px; height:38px' />");
				}

				/**
				 * 创建按钮
				 * @param {Object} ids
				 * @param {Object} value
				 */
				function createbutton(ids, value) {
					return $("<input type='button' name='"+ids+"' id='" + ids + "'  value='" + value + "' style='width:80px; height:30px' />");
				}
				
				/**
				 * 创建一个select下拉
				 * @param {Object} ids
				 * @param {Object} value
				 */
				function createselect(ids) {
					return $("<select name='"+ids+"' id='" + ids + "' class='form-control'  height='60' width='190' align='center'></select> %");
				}
				function createselectoption(ids,value) {
					return $("<option name='"+ids+"' id='" + ids + "' value='" + value + "' class='form-control' height='60' width='190' align='center'>" + value + "</option >");
				}
				
				/**
				 * 创建一个时间控件
				 * @param {Object} ids
				 * @param {Object} value
				 */
				function createdate(ids) {
					return $("<input type='date' name='"+ids+"' id='" + ids +" '  style='width:140px; height:38px' />  ");
				}

			});
		</script>
	</head>

	<body style="margin: 0;padding: 0;width: 750px" onfocus="wclose();" onload=";"><iframe name="CalFrame" width="144" height="192" id="CalFrame" src="/css/calendar.htm" style="border: 0px; border-image: none; display: none; position: absolute; z-index: 100;"></iframe>

		<div class="createOrderbox" style="margin: 0;padding: 0;width: 750px">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
				<div class="modal-content " style="width: 750px;height: auto;box-shadow: none;border: none;">
					<div class="modal-header"> <button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
						<h4 class="modal-title" id="basepop_popview_title">智能新建回款计划</h4> </div>
					<div class="modal-body" id="basepop_popview_body">

						<form name="form1" class="form-horizontal" onsubmit="return chksub();" action="/xcrm/contract/gathering/mapping_ok.xt" method="post" novalidate="">
							<!--主题-->
							<el-row :gutter="20">
								<el-col :span="4">
									<div style="vertical-align:middle;margin-bottom: 0;text-align: right;line-height: 40px;height: 40px;">主题:</div>
								</el-col>
								<el-col :span="16">
										<el-input v-model="ruleForm.titles" :span="16" placeholder="请输入内容" disabled></el-input>
									
								</el-col>
							</el-row>
						</br>

							<!--客户-->
							<el-row :gutter="20">
								<el-col :span="4">
									<div style="vertical-align:middle;margin-bottom: 0;text-align: right;line-height: 40px;height: 40px;">客户:</div>
								</el-col>
								<el-col :span="16">
										<el-input v-model="ruleForm.costomers" :span="16" placeholder="请输入内容" disabled></el-input>
									
								</el-col>
							</el-row>
						</br>

							<!--所有人-->
							<el-row :gutter="20">

								<!--所有人-->
								<el-col :span="4">
									<div style="vertical-align:middle;margin-bottom: 0;text-align: right;line-height: 40px;height: 40px;">所有人:</div>
								</el-col>
								<el-col :span="16">
									<el-select v-model="ruleForm.fills" disabled filterable placeholder="请选择"
									style="width: 473.333px;"> 
									<el-option
									v-for="item in options" :key="item.used" :label="item.usen"
									:value="item.used"> </el-option> 
									</el-select>
								</el-col>
							</el-row>
						</br>

							<!--客户签约人、发货-->
							<el-row :gutter="20">

								<!--客户签约人-->
								<el-col :span="4">
									<div style="vertical-align:middle;margin-bottom: 0;text-align: right;line-height: 40px;height: 40px;">客户签约人:</div>
								</el-col>
								<el-col :span="16">

									<el-input v-model="ruleForm.qmans" :span="16" disabled></el-input>
								</el-col>

							</el-row>
						</br>

							<p><span class="text-danger">智能应收提示：</span><br>合约金额<span style="white-space:nowrap">RMB{{ruleForm.summoney}}</span>，回款<span style="white-space:nowrap">RMB0.00</span>，回款计划(未回)<span style="white-space:nowrap">RMB{{ruleForm.summoney}}</span>，建议新建回款计划如下：</p>

							<p class="text-right">
								<input class="btn btn-d" id="button" type="button" value="增 加">
								<input class="btn btn-d" onclick="del()" type="button" value="删 除">
							</p>
							<div class="bootstrap-table m-t-10">
								<div class="fixed-table-container">
									<table class="table table-bordered table-hover" id="matching">
										<thead >

											<tr>
												<th class="th-inner" style="width: 70px">期次</th>
												<th class="th-inner">
													<font color="#ff0000">▲</font>金额</th>
												<th class="th-inner">百分比</th>
												<th class="th-inner">
													<font color="#ff0000">▲</font>计划回款日期</th>
												<th class="th-inner">
													操作</th>
												
											</tr>
										</thead>
										<tbody id="hkstart">
											
											
										</tbody>
									</table>
								</div>
							</div>

							<p class="text-center m-t-10">
								<input name="B1" class="btn btn-d" type="submit" value="确定">
								<input name="sub" class="btn btn-white" onclick="cancel()" type="button" value="取消">
							</p>
						</form>
						<hr>
						<p><b>说明：</b></p>
						<ol>
							<li>启用应收款算法功能后，在对应的条件下才出现此界面。</li>
							<li>默认生成全部应收款数值，可根据实际情况调整当期应收款数值。</li>
							<li>调整应收款金额值，自动折算相应百分比。</li>
							<li>计划回款日期支持账期选择、日期录入和选择。</li>
						</ol>

					</div>
				</div>
			</el-form>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: ".createOrderbox",
				data: {
					options: [{
						value: '选项1',
						label: '黄金糕'
					}, {
						value: '选项2',
						label: '双皮奶'
					}, {
						value: '选项3',
						label: '蚵仔煎'
					}, {
						value: '选项4',
						label: '龙须面'
					}, {
						value: '选项5',
						label: '北京烤鸭'
					}],
					value5: [],
					value11: [],
					ruleForm: {
						/*主题*/
						titles: "",
						/*客户*/
						costomers: "",
						/*订单号*/
						orderid: "",
						/*客户签约人*/
						qmans: "",
						
						/*所有者*/
						fills: "",
						summoney:0
						
					}

				},
				methods: {
					
				},mounted() {
					
					var mas=${huikuanorder};
					console.log(mas); 
					/* alert(this.ruleForm.restaurants.cus_name); */
					this.ruleForm.titles=mas.otitle;
					this.ruleForm.costomers=mas.cus_name;
					this.ruleForm.orderid=mas.o_id;
					this.ruleForm.qmans=mas.lin_name;
					this.ruleForm.summoney=mas.o_summoney;
					
					var ss=${options};
					console.log(ss); 
					this.options=ss;
					this.ruleForm.fills=this.options[0].used;
					console.log(this.options[0]); 
				}

			});
		</script>

	</body>

</html>